/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TextInput,
  Dimensions,
  PixelRatio,
} from 'react-native';
let widthOfMargin = Dimensions.get('window').width * 0.05;
export default class LoginLeaf extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputedNum: '',
      inputedPW: '',
    };
    this.updatePW = this.updatePW.bind(this);
  }
  updateNum(newText) {
    this.setState((state) => {
      return {
        inputedNum: newText,
      };
    });
  }
  updatePW(inputedPW) {
    this.setState({inputedPW});
  }
  userPressConfirm() {
    this.props.onLoginPressed(this.state.inputedNum, this.state.inputedPW);
  }
  userPressAddressBook() {
    //todo 调用系统通讯录
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput
          style={styles.textInputStyle}
          placeholder={'请输入手机号'}
          onChangeText={(inputedNum) =>
            this.setState({inputedNum})
          }></TextInput>
        <Text style={styles.textPrompStyle}>
          您输入的手机号：{this.state.inputedNum}
          您输入的密码：{this.state.inputedPW}
        </Text>
        <TextInput
          style={styles.textInputStyle}
          placeholder={'请输入密码'}
          secureTextEntry={true}
          onChangeText={this.updatePW}></TextInput>
        <Text
          style={styles.bigTextPrompt}
          onPress={() => this.userPressConfirm()}>
          确定
        </Text>
        <Text
          style={styles.bigTextPrompt}
          onPress={() => this.userPressAddressBook()}>
          通讯录
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  textInputStyle: {
    margin: widthOfMargin,
    fontSize: 20,
    backgroundColor: 'gray',
  },
  textPrompStyle: {
    margin: widthOfMargin,
    fontSize: 20,
  },
  bigTextPrompt: {
    textAlign: 'center',
    margin: widthOfMargin,
    fontSize: 30,
    backgroundColor: 'gray',
    color: 'white',
  },
});
